import axios from "axios";
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

const Detail = () => {
  const params = useParams();
  const [item, setItem] = useState<{
    uid: number;
    id: string;
    url: string;
    title: string;
    desc: string;
    greter: number;
		zan: boolean
  }>();
  const fetchDetail = async () => {
    const resp = await axios.get("/api/detail/" + params.id);
		setItem(resp.data.data)
  };
	const handleZan = async () => {
		if(!localStorage.getItem('token')) {
			return alert('请登录')
		}

		const resp = await axios.get(`/api/detail/${params.id}/zan`)
		fetchDetail()
	}

  useEffect(() => {
    fetchDetail();
  }, []);
	if(!item) {
		return <div>...</div>
	}
  return <div>
		<img src={item.url} alt="" width="100%"/>
		<h3>{item.title}</h3>
		<p>{item.desc}</p>
		<span style={{ color: item.zan ? 'red': '#000' }} onClick={() => handleZan()}>♡</span><span>{item.greter}</span>
	</div>;
};

export default Detail;
